<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>IM页面</title>
  </head>
  <body>
    <div class="content">
      <button onclick="clickBtn(0)">选择图片/视频</button>
      <button onclick="clickBtn(1)">选择文件</button>
      <button onclick="clickBtn(2)">拍照</button>
      <button onclick="clickBtn(3)">音视频聊天</button>
      <input id="userId" type="text" name="user" />
      <button onclick="clickBtn(4)">音视频会议</button>

      <input id="pickImage" type="file" accept="image/*" style="visibility: hidden" />
      <input
        id="takePhoto"
        type="file"
        accept="image/*"
        capture="camera"
        style="visibility: hidden"
      />
      <input id="pickFile" type="file" style="visibility: hidden" />
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: start;
          padding: 30px;
          box-sizing: border-box;
        "
      >
        <img src="" id="showImage" style="width: 300px; height: 500px" />
        <span id="filePath" style="font-size: 30px; margin-left: 30px"></span>
      </div>
    </div>
  </body>

  <script>
    let pickImage = document.getElementById("pickImage"); //选图
    let pickFile = document.getElementById("pickFile"); //选文件
    let takePhoto = document.getElementById("takePhoto"); //拍照
    let showImage = document.getElementById("showImage"); //显示的<img>
    let filePath = document.getElementById("filePath"); //显示文件路径

    window.androidToWebSendData = function(msg){
      alert(msg);
    }

    function clickBtn(type) {
      var typeStr = "";
      var params = {};
      var userId = "";
      switch (type) {
        case 0:
          pickImage.click();
          break;
        case 1:
          pickFile.click();
          break;
        case 2:
          takePhoto.click();
          break;
        case 3:
          console.log("音视频聊天");
          typeStr = "音视频聊天";
          break;
        case 4:
          console.log("音视频会议");
          typeStr = "音视频会议";
          userId = document.getElementById("userId").value;
          break;
      }
      params["code"] = type.toString();
      params["typeStr"] = typeStr;
      params["userId"] = userId;
      params["roomId"] = "1";
      console.log(params)
      // var json = Object.fromEntries(params);
      // console.log(jsonStr)
      var jsonStr = JSON.stringify(params);
      console.log(jsonStr)
      Flutter_Interface.postMessage(jsonStr);
      console.log("已发送消息给原生");
    }

    function fromFlutter(msg) {
      console.log(`收到了Flutter发的消息:${msg}`);
    }

    pickFile.onchange = function (e) {
      var files = e.target.files;
      var file = files[0];
      console.log(file);
      filePath.innerText = "已选择文件：" + file.name;
    };

    pickImage.onchange = function (e) {
      var files = e.target.files;
      console.log(files);
      showImgToImg(files[0]);
    };

    takePhoto.onchange = function (e) {
      var files = e.target.files;
      console.log(files);
      showImgToImg(files[0]);
    };

    function showImgToImg(file) {
      var fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onloadend = () => {
        showImage.src = fileReader.result;
      };
    }
  </script>

  <style type="text/css">
    body {
      padding: 0px;
      margin: 0px;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100vh;
    }

    .content button {
      height: 80px;
      margin: 20px 40px 20px 40px;
      font-size: 40px;
      box-sizing: border-box;
    }

    .content input {
      height: 80px;
      margin: 20px 40px 20px 40px;
      font-size: 40px;
      box-sizing: border-box;
    }
  </style>
</html>
